<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb">
        <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
        </x-breadcrumb>
      </header>
      <section>
        <div style="padding: 20px 20px">
          <el-table
            :data="tableData"
            class="tableStyle"
            :header-cell-style="$headerCellStyle"
            size="mini"
            stripe
            :border="$isborder"
          >
            <el-table-column label="名称" align="left" show-overflow-tooltip :min-width="$widthc">
              <template slot-scope="scope">
                <div class="introType-box">
                  <span class="type_name">{{ scope.row.type_name }}</span>
                  <span class="intro">{{ scope.row.intro }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="积分" align="left" show-overflow-tooltip :width="$widthb">
              <template slot-scope="scope">
                <div class="score" v-show="scope.row.startid !== scope.row.id">
                  {{ scope.row.score }}
                </div>
                <div v-show="scope.row.startid == scope.row.id">
                  <el-input-number v-model="scope.row.num" @change="handleChange" label="积分"></el-input-number>
                  <p style="color: red">设置为0表示关闭</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="每日限制次数（0为不限）" align="left" show-overflow-tooltip :width="$widthc">
              <template slot-scope="scope">
                <div v-if="scope.row.id == 1"></div>
                <div v-else>
                  <div class="number" v-show="scope.row.startid !== scope.row.id">
                    {{ scope.row.number }}
                  </div>
                  <div v-show="scope.row.startid == scope.row.id">
                    <el-input-number
                      v-model="scope.row.nbrDay"
                      @change="handleChange"
                      label="次数"
                      :min="0"
                    ></el-input-number>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="是否开启" :width="$widths" align="left" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <p :style="row.is_open == 1 ? 'color:#00a9b0' : 'color:red'">
                  {{ row.is_open == 1 ? "开启" : "关闭" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="left" :header-align="$heaerOpt" width="160">
              <template slot-scope="scope">
                <div class="btnFrom-box">
                  <div
                    class="details-box"
                    @click="startdit(scope.row.id, scope.row.score)"
                    v-show="scope.row.isEdit"
                    v-alive
                  >
                    调整
                  </div>
                  <div
                    class="details-box"
                    @click="newChang(scope.row.id, scope.row.num, scope.row.nbrDay)"
                    v-show="!scope.row.isEdit"
                  >
                    <span v-show="scope.row.isEdit"></span>保存
                  </div>
                  <div class="delete-box" @click="endDir(scope.row.id)" v-show="!scope.row.isEdit">
                    <span></span> 取消
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <!-- <footer class="pagination">
        <el-pagination
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :total="listTotal"
          :page-size="10"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
        >
        </el-pagination>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer> -->

      <el-dialog :visible.sync="dialogVisible" width="850px" height="210px" title="积分规则设置">
        <div class="ser_igm">
          <x-wangeditor class="vmEdit" v-model="introData" ref="xwangeditor"></x-wangeditor>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addintrobtn">确定</el-button>
        </div>
      </el-dialog>
    </article>
  </div>
</template>

<script>
export default {
  name: "AdminIndex",

  data() {
    return {
      page: 1,
      tableData: [],
      listTotal: 0, //total
      currentPage1: 1, //总页数
      isEdit: true,
      num: "",
      startid: "",
      limit: 10,
      introData: "",
      dialogVisible: false,
    }
  },

  mounted() {},
  created() {},
  activated() {
    if (this.$route.params.action == "refresh" || this.$isFirstInPage.get()) {
      this.page = 1
      this.listTotal = 0
      this.currentPage1 = 1
      this.tableData = []

      this.getList()
    }

    this.setPageTabs()
  },
  methods: {
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/scoreInfo/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: 30,
          },
        })
        if (res) {
          this.listTotal = res.content.total
          this.currentPage1 = res.content.current_page
          res.content.data.map((item, index) => {
            res.content.data[index].num = item.score
            res.content.data[index].nbrDay = item.number
            res.content.data[index].startid = ""
            res.content.data[index].isEdit = true
          })
          this.tableData = res.content.data
          console.log(this.tableData)
        }
      } catch (err) {
        let error = err.message.split("/")
        if (error[0] == 203) {
          this.tableData = []
          this.listTotal = 0
        }
        this.errorHandler(err)
      }
    },
    //分页
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    async newChang(id, score, number) {
      try {
        let res = await this.request({
          url: "/admin/scoreInfo/change",
          method: "post",
          loading: true,
          data: {
            id,
            score,
            number,
          },
        })
        if (res) {
          this.isEdit = true
          this.startid = ""
          this.num = ""
          this.$message.success(res.msg)
          let that = this
          setTimeout(() => {
            that.getList()
          }, 2000)
        }
      } catch (err) {
        // let error = err.message.split('/')
        // if (error[0] == 203) {

        // }
        this.errorHandler(err)
      }
    },
    handleChange(e) {
      console.log(e)
    },
    startdit(id, num) {
      this.isEdit = false
      this.startid = id
      this.tableData.map((item, index) => {
        if (item.id == id) {
          item.startid = id
          item.isEdit = false
        }
      })
    },
    endDir(id) {
      this.isEdit = true
      this.startid = ""
      this.tableData.map((item, index) => {
        if (item.id == id) {
          item.startid = ""
          item.isEdit = true
        }
      })
    },
    async addbtn() {
      try {
        let res = await this.request({
          url: "/admin/scoreInfo/customScoreRule",
          method: "get",
          loading: true,
          data: {},
        })
        if (res) {
          this.introData = res.content.intro
          console.log(res.content.intro)
          this.dialogVisible = true
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
    async addintrobtn() {
      try {
        let res = await this.request({
          url: "/admin/scoreInfo/customScoreRuleChange",
          method: "post",
          loading: true,
          data: { intro: this.introData },
        })
        if (res) {
          this.$message.success("设置成功")
          this.dialogVisible = false
        }
      } catch (err) {
        this.errorHandler(err)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
<style lang="scss">
.adjustment {
  background-color: $textColorblue;
  width: 70px;
  height: 32px;
  border-radius: 5px;
  font-size: 14px;
  border: none;
  color: #fff;
  cursor: pointer;
}
.adjustment:hover {
  background-color: $textColorblue;
  color: #fff;
}
</style>
